<template>
    <!--课程直播录播页-->
    <div class="contain">
        <div class="title">
            <span v-if="chaObj">{{chaObj.name}}</span>
            <span v-if="title">{{title}}</span>
        </div>
        <div class="clo-box">
            <div class="catalog-box" v-if="courseId">
                <div class="fold-btn" @click="handleFold()"><i :class="{fold:foldStatus}"></i></div>
                <transition name="shiftLeft">
                <div class="catalog" v-if="foldStatus">
                    <courseCatalog
                        :vid="vid"
                        :courseId="courseId"
                        :cataId="chaId"
                        :chaIndex="chaIndex"
                        :setting="{class:'video'}"
                        @changeVideo="changeVideo"
                    ></courseCatalog>
                </div>
                </transition>
                <input type="hidden" id="downPDF">
                <a class="download-btn" @click="handleDownload">
                    <i class="icon-download"></i>课件下载
                </a>
            </div>
            <div class="video-box">
                <div class="video">
                    <div class="prism-player" id="J_prismPlayer"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import courseCatalog from '../setting/comp/courseCatalog.vue'
    export default {
        name: 'live',
        components: {
            courseCatalog
        },
        data() {
            return {
                title: '',
                inited: false,
                courseId: null,
                player: null,
                vid: null,
                playauth: null,
                videoSrc: '',
                chaId: null,
                chaObj: null, // 当前节内容
                chaIndex: null,
                downloadUrl: null,
                timer: null,
                logId: null,
                foldStatus: true
            };
        },
        computed: {
        },
        watch: {
            /**/
        },
        destroy(){
            this.videoLogEnd()
            clearInterval(this.timer);
        },
        mounted() {
            this.$util.loadCSS('https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css');
            this.$util.loadJS('https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js', ()=>{
                // 有url直接渲染
                this.courseId = this.$route.query.courseId;
                if(this.$route.query.url) {
                    this.title = this.$route.query.title;
                    this.videoSrc = decodeURI(this.$route.query.url);
                    this.vid = this.$route.query.vid;
                    this.ajaxGetPlayAuth()
                    this.videoLogInit();
                } else {
                    this.initCourse();
                }
            });
            window.onbeforeunload = ()=>{
                this.videoLogEnd()
            }
            window.addEventListener('beforeunload', ()=> {
                this.videoLogEnd()
            })
        },
        methods: {
            initCourse() {
                if(this.$route.query.chaId) {
                    this.chaId = this.$route.query.chaId;
                    this.chaIndex = this.$route.query.index;
                    this.ajaxDownload();
                    this.$api.ajaxData({
                        pathName: 'getVideoListByChaId',
                        authorization: true,
                        params: {
                            cha_id: this.$route.query.chaId
                        }
                    }).then(res =>{
                        this.chaObj = res.obj[ this.$route.query.index];
                        this.videoSrc = this.chaObj.video_url;
                        this.vid = this.chaObj.vid;
                        this.ajaxGetPlayAuth();
                        this.videoLogInit();
                    }).catch(()=> {

                    });
                }
            },
            initVideo() {
                let that = this;
                const Aliplayer = window.Aliplayer;
                if(!this.player) {
                    this.player = new Aliplayer({
                        id: 'J_prismPlayer',
                        autoplay: true,
                        width: '100%',
                        height: '100%',
                        vid: this.vid,
                        playauth: this.playauth
                        //支持播放地址播放,此播放优先级最高
                        /*source : this.videoSrc,*/
                    },function(player){
                        console.log(player);
                        clearInterval(this.timer)
                        this.timer = setInterval(that.ajaxOrderLive(),10000);
                        document.getElementsByClassName('prism-cc-btn')[0].style.display = 'none';
                        document.getElementsByTagName('video')[0].setAttribute('controlslist','nodownload');
                    });
                    document.getElementsByClassName('prism-cc-btn')[0].style.display = 'none';
                    document.getElementsByTagName('video')[0].setAttribute('controlslist','nodownload');
                } else {
                    this.player.replayByVidAndPlayAuth(this.vid,this.playauth);
                }

            },
            // 心跳验签
            ajaxOrderLive() {
                let option = {
                    pathName: 'doCheckHb',
                    authorization: true,
                };
                this.$api.ajaxData(option)
                    .then(res => {
                        if(res.code !== 200) {
                            this.$util.alert('用户在其他地方登录，请重新登录');
                            this.videoSrc = null;
                            clearInterval(this.timer);
                            setTimeout(()=>{
                                location.replace('/login');
                            },2000)
                        }
                    });
            },
            //播放凭证
            ajaxGetPlayAuth() {
                let option = {
                    pathName: 'doGetPlayAuth',
                    authorization: true,
                    params: {
                        vid: this.vid
                    }
                };
                this.$api.ajaxData(option)
                    .then(res => {
                        this.playauth = res.obj;
                        this.initVideo();
                    });
            },
            // 下载课件地址
            ajaxDownload() {
                let option = {
                    pathName: 'getKjUrl',
                    authorization: true,
                    params: {
                        zid: this.chaId
                    }
                };
                this.$api.ajaxData(option)
                    .then(res => {
                        if(res.obj.length > 0) {
                            this.downloadUrl = res.obj[0].url
                        }
                    });
            },
            handleDownload() {
//                var $form = $('<form method="GET"></form>');
//                $form.attr('action', this.downloadUrl);
//                $form.appendTo($('body'));
//                $form.submit();
                this.$util.downloadFile(this.downloadUrl);
            },
            // 更换视频
            changeVideo(video, chaId) {
                this.chaObj = video;
                this.vid = video.vid;
                this.chaId = chaId;
                this.ajaxGetPlayAuth();
                this.ajaxDownload();
                this.videoLogEnd().then(()=>{
                    this.logId = null;
                    this.videoLogInit();
                });

            },
            videoLogInit(){
                let option = {
                    pathName: 'saveSplog',
                    authorization: true,
                    params: {
                        spid: this.vid,
                        type: this.$route.query.type,
                    }
                };
                this.$api.ajaxData(option)
                    .then(res => {
                        this.logId = res.obj.id
                    });
            },
            videoLogEnd(){
                let option = {
                    pathName: 'saveSplog',
                    authorization: true,
                    params: {
                        spid: this.vid,
                        type: this.$route.query.type,
                        id: this.logId
                    }
                };
                this.$api.ajaxData(option)
                    .then(() => {
                    });
            },
            handleFold() {
                this.foldStatus = !this.foldStatus
            }
        }
    };
</script>
<style scoped lang="scss">
.contain {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #333;
    .title {
        position: relative;
        padding: 0 30px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        background: rgba(102, 102, 102, 1);
    }
    .clo-box {
        display: flex;
        height: calc(100vh - 60px);
        .catalog-box {
            position: relative;
            padding-bottom: 60px;
            background: rgb(0, 0, 51);
            box-sizing: border-box;
            z-index: 9;
            .fold-btn {
                position: absolute;
                right: -20px;
                height: 48px;
                width: 20px;
                display: flex;
                align-items: center;
                border-bottom: 13px solid transparent;
                border-left: 18px solid rgb(0, 0, 51);
                border-top: 13px solid transparent;
                i {
                    position: absolute;
                    left: -12px;
                    @include triangle(10px, #fff, right);
                    transition-duration: 300ms;
                    &.fold {
                        transform: rotate(180deg);
                    }
                }
            }
            .catalog {
                height: 100%;
                overflow: auto;
                &::-webkit-scrollbar {
                    display: none;
                }
            }
            .download-btn {
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                height: 60px;
                align-items: center;
                justify-content: center;
                text-align: center;
                cursor: pointer;
                color: #333;
                background: rgb(204, 204, 204);
                .icon-download {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                    background: url("../../assets/image/sucai/u3754.png") no-repeat, url("../../assets/image/sucai/u3753.png") no-repeat;
                    background-position: center top,center;
                }
            }
        }
        .video-box {
            position: relative;
            width: 100%;
            .video {
                position: absolute;
                top:0;
                width: 100%;
                height: 100%;
            }
        }
    }
    .switch-tab-box {
        height: 60px;
        line-height: 60px;
        background: rgb(102,102,102);
        font-size: 22px;
        color: #006ade;
        font-weight: bold;
        text-align: center;
    }
    .catalog-box {
        background: #fff;
    }
}
video::-internal-media-controls-overflow-button{ display: none !important;}
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
</style>
